<template>
  <div>
    <a-card
      title="Default size card"
      style="width: 300px"
    >
      <template #extra><a href="#">more</a></template>
      <p>card content</p>
    </a-card>
    <br />
    <div style="background: #ececec; padding: 30px">
      <a-card
        title="Card title"
        :bordered="false"
        style="width: 300px"
      >
        <p>Card content</p>

      </a-card>

    </div>
    <a-card
      hoverable
      style="width: 240px"
    >
      <template #cover>
        <!-- <img
          alt="example"
          src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png"
        /> -->
      </template>
      <a-card-meta title="Europe Street beat">
        <template #description>www.instagram.com</template>
      </a-card-meta>
    </a-card>
    <a-card title="Card Title">
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid
        style="width: 25%; text-align: center"
        :hoverable="false"
      >Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
      <a-card-grid style="width: 25%; text-align: center">Content</a-card-grid>
    </a-card>
    <div style="background-color: #ececec; padding: 20px">
      <a-row :gutter="16">
        <a-col :span="8">
          <a-card
            title="Card title"
            :bordered="false"
          >
            <p>card content</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card
            title="Card title"
            :bordered="false"
          >
            <p>card content</p>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card
            title="Card title"
            :bordered="false"
          >
            <p>card content</p>
          </a-card>
        </a-col>
      </a-row>
    </div>
    <a-card title="Card title">
      <p style="font-size: 14px; color: rgba(0, 0, 0, 0.85); margin-bottom: 16px; font-weight: 500">
        Group title
      </p>
      <a-card title="Inner card title">
        <template #extra>
          <a href="#">More</a>
        </template>
        Inner Card content
      </a-card>
      <a-card
        title="Inner card title"
        :style="{ marginTop: '16px' }"
        :loading="true"
      >
        <template #extra>
          <a href="#">More</a>
        </template>
        Inner Card content
      </a-card>
    </a-card>
    <a-card
      hoverable
      style="width: 300px"
    >
      <template #cover>
        <img
          alt="example"
          src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
        />
      </template>
      <template #actions>
        <a-button>1</a-button>
        <a-button>1</a-button>
        <a-button>1</a-button>

      </template>
      <a-card-meta
        title="Card title"
        description="This is the description"
      >
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" />
        </template>
      </a-card-meta>
    </a-card>
    <a-card
      style="width: 100%"
      title="Card title"
      :tab-list="tabList"
      :active-tab-key="key"
      @tabChange="key => onTabChange(key, 'key')"
    >
      <template #customTab="item">
        <span v-if="item.key === 'tab1'">
          {{ item.key }}
        </span>
      </template>
      <template #extra>
        <a href="#">More</a>
      </template>
      {{ contentList[key] }}
    </a-card>
    <br />
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    return {
      tabList: [
        {
          key: 'tab1',
          tab: 'tab1',
        },
        {
          key: 'tab2',
          tab: 'tab2',
        },
      ],
      contentList: {
        tab1: 'content1',
        tab2: 'content2',
      },
      tabListNoTitle: [
        {
          key: 'article',
          tab: 'article',
        },
        {
          key: 'app',
          tab: 'app',
        },
        {
          key: 'project',
          tab: 'project',
        },
      ],
      key: 'tab1',
      noTitleKey: 'app',

    }
  },
  created() { },
  mounted() { },
  methods: {
    onTabChange() {

    },
    onTabChange(value, type) {
      console.log(value, type);
      if (type === 'key') {
        this.key = value;
      } else if (type === 'noTitleKey') {
        this.noTitleKey = value;
      }
    },
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
</style>
